﻿@using System.Globalization
@using BookShop.Library.Constant
@model BookShop.DTO.Customer
@{
    ViewBag.Title = "Thông tin tài khoản | Book Shop Ngân Hà";
}

<ul class="breadcrumb">
    <li><a href="@Url.Action("Index", "Home")">Trang chủ</a></li>
    <li><a href="@Url.Action("Index", "Account")">Trang tài khoản</a></li>
    <li class="active">Sửa thông tin tài khoản</li>
</ul>

<div class="row margin-bottom-40">
    @{
        Html.RenderPartial("_AccountSidebar");
    }
    @if (Session[SessionKey.Customer] != null)
    {
        <div class="col-md-9 col-sm-7">
            <h1>Sửa thông tin tài khoản</h1>
            <div class="content-form-page">
                <div class="row">
                    <div class="col-md-8 col-sm-8">
                        <form class="form-horizontal" id="formRegister" method="POST" action="@Url.Action("PersonalInfomation")" role="form">
                            <input type="hidden" name="customerId" id="customerId" value="@Model.Id"/>
                            <fieldset>
                                <legend>Thông tin cá nhân</legend>
                                <div class="form-group">
                                    <label for="fullName" class="col-lg-4 control-label">Họ và tên <span class="require">*</span></label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="fullName" name="fullName" value="@Model.FullName">
                                        <span class="help-block" for="fullName"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-lg-4 control-label">Email <span class="require">*</span></label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="email" name="email" value="@Model.Email">
                                        <span class="help-block" for="email"></span>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-lg-4 control-label">Ngày sinh</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control form-control-inline date-picker" name="birthdate" id="birthdate" size="16" value="@(Model.Birthdate.HasValue ? Model.Birthdate.Value.ToString("d", CultureInfo.CreateSpecificCulture("vi-VN")) : string.Empty)" data-date-format="dd/mm/yyyy"/>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-lg-4 control-label">Địa chỉ</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="address" name="address" value="@Model.Address">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="email" class="col-lg-4 control-label">Số điện thoại</label>
                                    <div class="col-lg-8">
                                        <input type="text" class="form-control" id="phone" name="phone" value="@Model.Phone">
                                        <span class="help-block" for="phone"></span>
                                    </div>
                                </div>
                            </fieldset>
                            <div class="row">
                                <div class="col-lg-8 col-md-offset-4 padding-left-0 padding-top-20">
                                    <button type="submit" class="btn btn-primary">Lưu</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    }
</div>

@section Javascript{
    <script src="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.min.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="~/Content/assets/global/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/jquery-validation/js/jquery.validate.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js")"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.date-picker').datepicker({
                autoclose: true
            });
            validateAdd();
        });
        function validateAdd() {
            var form1 = $('#formRegister');
            var error = $('.alert-danger', form1);
            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block',
                focusInvalid: false,
                ignore: "",
                rules: {
                    email: {
                        required: true
                    },
                    fullName: {
                        required: true
                    },
                    phone: {
                        digits: true
                    }
                },
                invalidHandler: function () {
                    error.show();
                },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },

                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },

                success: function (label) {
                    label
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    error.hide();
                    form.submit();
                }
            });
        }
    </script>
}

@section Css{
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/assets/global/plugins/bootstrap-datepicker/css/datepicker3.css")"/>
    <link href="~/Content/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
    <link href="~/Content/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel.css" rel="stylesheet">
    <link href="~/Content/assets/global/plugins/uniform/css/uniform.default.css" rel="stylesheet" type="text/css">
}
